<template>
  <div>
    <el-dialog width="50%" :title="title" :visible.sync="isOpen" @close="close">
      <el-row :gutter="0">
        <el-form ref="objQuForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="23">
            <el-form-item label="题目内容" prop="objContent">
              <el-input
                v-model="formData.objContent"
                type="textarea"
                placeholder="请输入题目内容"
                :maxlength="255"
                show-word-limit
                :autosize="{minRows: 2, maxRows: 4}"
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="题目类型" prop="objType">
              <el-select
                v-model="formData.objType"
                placeholder="请选择题目类型"
                :style="{width: '100%'}"
              >
                <el-option
                  v-for="dict in dict.type.obj_qu_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="知识点">
              <el-select
                v-model="objTags"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请输入题目知识点(不超过两个)"
                @change="change"
                :style="{width: '100%'}"
              ></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="难度等级" prop="objGrand">
              <el-rate v-model="formData.objGrand" show-score></el-rate>
              <el-tooltip
                style="margin-left:10px"
                effect="light"
                content="不填随机难度1~5"
                placement="right-start"
              >
                <i class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>
          <div v-if="formData.objType!=2">
            <el-col :span="23">
              <el-form-item label="选项A" prop="objOne">
                <el-input
                  v-model="formData.objOne"
                  type="textarea"
                  placeholder="请输入选项A内容"
                  :maxlength="255"
                  show-word-limit
                  :autosize="{minRows: 2, maxRows: 4}"
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="选项B" prop="objTwo">
                <el-input
                  v-model="formData.objTwo"
                  type="textarea"
                  placeholder="请输入内容B选项"
                  :maxlength="255"
                  show-word-limit
                  :autosize="{minRows: 2, maxRows: 4}"
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="选项C" prop="objThree">
                <el-input
                  v-model="formData.objThree"
                  type="textarea"
                  placeholder="请输入内容C选项"
                  :maxlength="255"
                  show-word-limit
                  :autosize="{minRows: 2, maxRows: 4}"
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="选项D" prop="objFour">
                <el-input
                  v-model="formData.objFour"
                  type="textarea"
                  placeholder="请输入内容D选项"
                  :maxlength="255"
                  show-word-limit
                  :autosize="{minRows: 2, maxRows: 4}"
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
          </div>
          <el-col :span="23" v-if="formData.objType==1">
            <el-form-item label="答案" prop="objAnswer">
              <el-radio-group v-model="formData.objAnswer" size="medium">
                <el-radio-button
                  v-for="(item, index) in choice"
                  :key="index"
                  :label="item.value"
                >{{item.label}}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="23" v-if="formData.objType==2">
            <el-form-item label="答案" prop="objAnswer">
              <el-radio-group v-model="formData.objAnswer" size="medium">
                <el-radio-button
                  v-for="(item, index) in judge"
                  :key="index"
                  :label="item.value"
                >{{item.label}}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="23" v-if="formData.objType==3">
            <el-form-item label="答案" prop="objAnswerList">
              <el-checkbox-group v-model="objAnswerList" size="medium">
                <el-checkbox-button
                  v-for="(item, index) in choice"
                  :key="index"
                  :label="item.value+''"
                >{{item.label}}</el-checkbox-button>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="答案解析" prop="objAnswerContent">
              <el-input
                v-model="formData.objAnswerContent"
                type="textarea"
                placeholder="请输入答案解析"
                :maxlength="512"
                show-word-limit
                :autosize="{minRows: 2, maxRows: 4}"
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">添加/修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  <script>
import { addObjective, updateObjective } from "@/api/question/objAndSub";
export default {
  dicts: ["obj_qu_type"],
  inheritAttrs: false,
  name: "ObjUpForm",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    objInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {
        objContent: undefined,
        objType: 1,
        objGrand: 0,
        objOne: undefined,
        objTwo: undefined,
        objThree: undefined,
        ojbFour: undefined,
        objAnswer: undefined,
        objAnswerContent: undefined
      },
      objAnswerList: [],
      objTags: [],
      rules: {
        objContent: [
          {
            required: true,
            message: "题目内容不能为空",
            trigger: "blur"
          }
        ],
        objType: [
          {
            required: true,
            message: "请选择题目类型",
            trigger: "blur"
          }
        ],
        objOne: [
          {
            required: true,
            message: "请输入选项A内容",
            trigger: "blur"
          }
        ],
        objTwo: [
          {
            required: true,
            message: "请输入内容B选项",
            trigger: "blur"
          }
        ],
        objThree: [
          {
            required: true,
            message: "请输入内容C选项",
            trigger: "blur"
          }
        ],
        objFour: [
          {
            required: true,
            message: "请输入内容D选项",
            trigger: "blur"
          }
        ],
        objAnswer: [
          {
            required: true,
            message: "题目答案不能为空",
            trigger: "change"
          }
        ],
        objAnswerList: [
          {
            required: true,
            type: "array",
            message: "题目答案不能为空",
            trigger: "change"
          }
        ],
      },
      choice: [
        {
          label: "选项A",
          value: 1
        },
        {
          label: "选项B",
          value: 2
        },
        {
          label: "选项C",
          value: 3
        },
        {
          label: "选项D",
          value: 4
        }
      ],
      judge: [
        {
          label: "对",
          value: 1
        },
        {
          label: "错",
          value: 2
        }
      ]
    };
  },
  computed: {
    /** 弹框是否打开 */
    isOpen: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
      this.formData = {
        objContent: undefined,
        objType: 1,
        objGrand: 0,
        objOne: undefined,
        objTwo: undefined,
        objThree: undefined,
        ojbFour: undefined,
        objAnswer: undefined,
        objAnswerContent: undefined
      };
      this.objAnswerList = [];
      this.objTags = [];
      this.resetForm("objQuForm");
    },
    handleConfirm() {
      this.$refs["objQuForm"].validate(valid => {
        if (valid) {
          if (this.formData.objType == 3) {
            this.formData.objAnswer = this.objAnswerList.join("$");
          }
          if (this.formData.objId != null) {
            updateObjective(this.formData).then(res => {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.close();
            });
          } else {
            addObjective(this.formData).then(res => {
              this.$message({
                message: "新增成功",
                type: "success"
              });
              this.close();
            });
          }
        }
      });
    },
    change() {
      this.formData.objTag = this.objTags.join(",");
    }
  },
  watch: {
    objInfo: {
      handler: function(newVal, oldVal) {
        if (newVal != null) {
          this.formData = newVal;
          this.objTags = newVal.objTag.split(",");
          if (newVal.objType == 3) {
            this.formData.objAnswerList =
              this.formData.objAnswer != null
                ? this.formData.objAnswer.split("$")
                : [];
          }
        }
      }
    }
  }
};
</script>
  <style>
.el-rate {
  display: inline-block;
  vertical-align: text-top;
}
</style>
  